<div id="container">
<div id="header">头</div>
<div id="wrapper">
<div id="content">内容</div>
</div>
<div id="navigation">侧栏</div>
<div id="extra">额外</div>
<div id="footer">页脚</div>
</div>
麻油四辛辛苦苦写完了个人网页，又海投了不少简历。
除了零星有几家小公司表示兴趣，大部分都石沉大海。
这种不痛不痒的简历，大公司的HR们，往往第一眼的时候就直接无视。
至于简历中的那个链接，更是少有人点击 --- 谁知道有没有病毒呢。
这让麻油四不禁有些颓废。
“陌上花发，可以缓缓醉矣。忍把浮名，换了浅斟轻唱。”
虽然找工作并不顺利，但麻油四会写网页的事，却传到了学校就业办老师的耳朵里。
“小四啊，眼看就要开双选会了，来帮忙写个网站吧。”
“这个...我真的好忙好忙，恐怕没时间啊...”
“有补助的哦。”
“那好吧。”
就这样，麻油四毫无原则的接下人生的第一个项目。
网站需求不复杂。无非是企业的简介，面试的技巧，签约注意事项之类的内容。
不过,面对老师给出的几个页面版式的草图，麻油四初学CSS，不由有些犯愁。
“用CSS模板”，阿牛不多一句废话。
CSS模板，是一组CSS样式的集合，包括了多种布局。
用CSS模板，可以加速和简化网页的设计和开发。
网上有很多成熟的CSS模板，比如YUI Grids，Blue Print Css，YAML，960 Gird等等。
当然，很多CSS高手倾向于自己打造一套用着顺手的CSS模板。
在此介绍两套比较好用的CSS模板。
首先来自Alessandro Fulciniti的一套CSS模板，此框架在同样的HTML结构上,用CSS实现了40种布局 链接 。
这40种布局囊括了两栏，三栏，定宽，自适应，等常见布局。
其基本的页面结构如下。
再来看看对应的几个最常用布局的CSS
01.三个百分比栏目:
div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
图:三个百分比栏目
24.两栏自适应，一边固定宽度
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
图:两栏自适应，一边固定宽度
39.固定宽度品字形
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px}
div#extra{float:right;width:350px}
div#footer{clear:both;width:100%}
图:固定宽度品字形
可以根据需要，选择适合的CSS。
展示类网站，更常用的是定宽布局,各大门户的首页都是定宽布局。
网站 首页页面宽度 Yahoo! 950px 淘宝 950px MySpace 960px 新浪 9 50px 网易 960px Live Search 958px 搜狐 950px 优酷 960px AOL 960px
而说到定宽页面的CSS模板，不得不提著名的 960 Grid （ http://960.gs/ ）。
根据网络砖家们的研究发现，950px-960px是网页的最适合宽度。
而Grid的含义是栅格化，是一种布局思想，它将网页分割固定大小的列。
图:分割图
通过这些列统一页面中元素的尺寸，以实现规范化和快速开发。
常见的列数有12列，16列，24列。
960 Grid 提供了12列和16列的样式 链接 。
图:12列效果图
也可以在 http://www.spry-soft.com/grids/ 自定义列数和宽度，来按需生成CSS。
960 Grid 的基本页面结构如下。
<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
</div>
最外层的div的class是container_12，12是表示使用12列的布局。
下面的class，表示此div宽7列（grid_7），前面空一列（prefix_1）
<div class="grid_7 prefix_1">
下面的alpha表示该层左边的外边距为0，也就是margin-left:0;。通常用于每行的第一个gird。
<div class="grid_2 alpha">
同理，omega表示右边的外边距为0，也就是margin-right:0;,常用于每行的最后一个gird。
<div class="grid_2 omega">
CSS模板除了给开发带来方便，也是很好的学习资源。
读CSS模板的源代码，学习别人的CSS布局技巧，可以迅速提升自己的页面设计水平。
失之桑榆，收之东隅，工作没眉目，能挣点补助也算没白学。
上帝为你关上一扇门，一定会为你打开一扇窗。
爬窗而入，总好过被尿憋死。
“天将降大任于斯人也”，麻油四看到未来，看到希望，看到天上的星星在闪光。